<!--查看应聘者，米娜事，考核，录用-->
<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in" ref="dialogBox">
      <div class="cornerComment-in-title">
        <span>添加/编辑设备管理</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <el-form label-width="160px" ref="editForm">
          <el-form-item label="设备名称：">
            <el-input v-model="device.name" auto-complete="off" placeholder="设备名称"></el-input>
          </el-form-item>
          <el-form-item label="设备号：">
            <el-input v-model="device.id_code" auto-complete="off" placeholder="设备号"></el-input>
          </el-form-item>
          <el-form-item label="设备IP：">
            <el-input v-model="device.ip" auto-complete="off" placeholder="设备IP"></el-input>
          </el-form-item>
          <el-form-item label="设备类型：">
            <el-radio-group v-model="device.type">
              <el-radio :label="1">考勤</el-radio>
              <el-radio :label="2">体重秤</el-radio>
<!--              <el-radio :label="3">家长/教职工</el-radio>-->
            </el-radio-group>
          </el-form-item>
          <el-form-item label="区域归属:">
            <el-radio-group v-model="device.school_id">
              <el-radio :label="item.id" v-for="item in schoolList">{{ item.name }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item :label="device.type==1?'考勤截止记录时间：':(device.type==2?'截止时间：':'开始记录接送时间：')">
            <el-time-picker
                v-model="device.sign_end_time"
                :picker-options="timeLine"
                placeholder="选择时间"
                format='HH:mm'
                value-format='HH:mm'>
            </el-time-picker>
            <el-link v-if="device.type==1" type="warning" :underline="false">考勤截止记录时间,过了设置时间不记录学生考勤</el-link>
            <el-link v-if="device.type==3" type="warning" :underline="false">开始记录接送时间,从设置的时间开始记录教职工离校/家长接送记录</el-link>
          </el-form-item>
        </el-form>
      </div>
      <div class="cornerComment-in-footer">
        <el-button @click="closePOpup" size="small">返回</el-button>
        <el-button type="primary" @click="saveForm()" size="small">确认并保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {schoolIndex} from '@/api/admin/system'

export default {
  // OperationType 操作类型 InterviewReview 简历审核预约面试
  props: ['visible', 'facilityId'], // resumeType show 只查看不操作 ; resumeId 简历id
  components: {},
  data() {
    return {
      dialogVisible: false,
      device: {
        name: '',
        ip: '',
        id_code: '',
        type: 1,
        sign_end_time: '13:00',
        school_id: 0
      },
      timeLine: {selectableRange: '00:00:00 - 23:59:00'},
      face_ip: '',
      schoolList: []
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('facilityId:', this.facilityId)
        if(this.facilityId){
          this.getForm()
          this.getSettingFn()
        }
        this.schoolIndexFn()
      } else {
        this.device = this.getJson({
          name: '',
          ip: '',
          id_code: '',
          type: 1,
          sign_end_time: '13:00',
          school_id: 0
        })
      }
    }
  },
  created() {
  },
  methods: {
    schoolIndexFn() {
      schoolIndex().then(res => {
        let list_ = JSON.parse(JSON.stringify(res.list))
        list_.unshift({id: 0, name: '其他'})
        this.schoolList = list_
      })
    },
    async saveForm() {
      if (this.facilityId) {
        this.device.id = this.facilityId;
      }
      let data = await this.$post(this.facilityId ? this.api.Developmental.faceFacility.edit : this.api.Developmental.faceFacility.add, this.device);
      if (!data.code) {
        this.$message.success(data.msg)
        this.getFaceFn()
      } else {
        this.$message.error(data.msg)
      }
    },
    async getForm() {
      let data = await this.$fetch(this.api.Developmental.faceFacility.edit, {id:this.facilityId});
      if (!data.code) {
        this.device = this.getJson({
          name: data.vo.name,
          ip: data.vo.ip,
          id_code: data.vo.id_code,
          type: data.vo.type,
          sign_end_time: Number(data.vo.sign_end_time)===0?'13:00':data.vo.sign_end_time,
          school_id: data.vo.school_id || 0
        })
      } else {
      }
    },
    // 通讯器链接
    async getFaceFn(){
      if(this.face_ip){
        let data = await this.axios.get(this.face_ip, {});
        console.log(data)
      }
    },
    closePOpup() {
      this.$emit('update:visible', false)
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    async getSettingFn() {
      let data = await this.$fetch(this.api.system_setting, {});
      if (data.code === 0) {
        this.face_ip = data.vo.face_ip;
      }
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 600px;
  height: 520px;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px 20px 0px 10px;
  flex: 1;
  overflow-y: auto;
}

.close-Btn-line {
  cursor: pointer;
}

.toolbarLine {
  text-align: center;
}

.resumeBody {
  display: flex;
  border-style: solid solid none;
  border-width: 1px;
  border-color: #ddd;
  margin-bottom: 40px;
}

.resumeBody-left {
  flex: 1;
}

.resumeBody-left-line {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  /*height: 50px;*/
  /*line-height: 49px;*/
}

/*.resumeBody-left-line:last-child{*/
/*  border-bottom:none;*/
/*}*/
.resumeBody-left-line-title {
  width: 120px;
  background: #eee;
  text-align: center;
  height: 70px;
  line-height: 70px;
}

.resumeBody-left-line-box {
  flex: 1;
  padding-left: 20px;
  /*padding: 10px 0 10px 20px;*/
}

.resumeBody-right {
  height: 213px;
  display: block;
  background: #ddd;
}

.resumeBody-right img {
  height: 100% !important;
}


.order-edit-timeline-content {
  display: flex;
  padding: 30px 10px;
}


.order-title span {
  display: block;
  width: 4px;
  height: 18px;
  background: #3377ff;
  margin-right: 10px;
  border-radius: 2px;
}

.order-edit-timeline-content {
  display: flex;
}

.order-edit-timeline-list {
  flex: 1;
  font-size: 12px;
}

.list-content {
  display: flex;
  align-items: center;
  position: relative;
  height: 2px;
  margin-bottom: 20px;

}

.list-content .iconfont {
  position: absolute;
  background: #fff;
  left: 50%;
  top: 0;
  margin-left: -8px;
  margin-top: -7px;
  /*margin: -50% -50%;*/
  /*transform:translate(-50%,-50%);*/
  color: #c1c4cc;
}

.orderActive .iconfont {
  color: #3377ff;
  font-size: 18px;
  margin-top: -9px;
}

.list-content-left {
  flex: 1;
}

.list-content-right {
  flex: 1;
}

.border-not-arrived {
  border-bottom: 2px dashed #c1c4cc;
}

.border-arrived {
  border-bottom: 3px solid #dae3fe;
}

.title-content {
  text-align: center;
  margin-bottom: 5px;
  margin-top: 10px;
  color: #999;
}

.time-content p:nth-child(1) {
  color: #6396fb;
}

.time-content p {
  color: #555;
}

.time-content p span {
  cursor: pointer;
  color: #1b8de5;
  text-decoration: underline;
}

.time-content p em {
  font-style: normal;
}

.orderActive .title-content {
  color: #333;
}

.time-content {
  text-align: center;
}

.orderActive .time-content {
  color: #333;
}

.data-list-img img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.disier-box-timeline-list span:first-child {
  flex: 1;
}

.disier-box-timeline-list span:last-child {
  color: #3377ff;
  cursor: pointer;
}

/*end*/
/*.pulse {*/
/*  background: rgba(239, 45, 2, 0.6) !important;*/
/*  -webkit-animation: warn 0.9s ease-out;*/
/*  -moz-animation: warn 0.9s ease-out;*/
/*  animation: warn 0.9s ease-out;*/
/*  animation-iteration-count: 1;*/
/*  -webkit-animation-iteration-count: infinite;*/
/*  -moz-animation-iteration-count: infinite;*/
/*  animation-iteration-count: infinite;*/
/*  box-shadow: 1px 1px 30px #EF2D02;*/
/*}*/
/*.pulse, .pulse-big {*/
/*  position: absolute;*/
/*  width: 50px;*/
/*  height: 50px;*/
/*  border: 2px solid #EF2D02;*/
/*  background: rgba(239, 45, 2, 0.8);*/
/*  border-radius: 50%;*/
/*  z-index: 100;*/
/*  opacity: 0;*/
/*  top: -15px;*/
/*  left: -16px;*/
/*}*/
.pulse, .pulse-big {
  position: absolute;
  width: 50px;
  height: 50px;
  border: 2px solid #37f;
  background: rgba(239, 45, 2, 0.8);
  border-radius: 50%;
  z-index: 9;
  opacity: 0;
  top: -16px;
  left: -16px;
}

.pulse {
  background: rgba(40, 118, 238, 0.6) !important;
  -webkit-animation: warn 0.9s ease-out;
  animation: warn 0.9s ease-out;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-box-shadow: 1px 1px 30px #EF2D02;
  box-shadow: 1px 1px 30px #37f;
}

@keyframes warn {
  0% {
    -moz-transform: scale(0);
    transform: scale(0);
    opacity: 1;
  }

  100% {
    -moz-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}

.check-paytype {
  margin-left: 5px;
  color: #6396fb;
  cursor: pointer;
}

.viewerImg {
  width: 50px;
  cursor: pointer;
}

.title-status {
  position: relative;
}

.title-status span {
  cursor: pointer;
  position: absolute;
  top: -5px;
  right: 0;
  color: #6396fb;
  font-size: 14px;
  padding: 0 10px;
}
</style>

